<template>
  <div class="container">
    <div class="subtitle">
      <p>
        <span class="title-point"></span>
        消控、周界告警
      </p>
      <div class="title-extra">
        <img src="../assets/image/blue-stack.png" alt />
      </div>
    </div>
    <div class="cotent">
      <div class="map">
        <img src="../assets/image/map_content.png" alt />
      </div>
      <div class="map-tips">
        <span>
          <img src="../assets/image/error_icon.png" alt />消控告警
        </span>
        <span>
          <img src="../assets/image/warn_icon.png" alt />周界告警
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "map"
};
</script>

<style lang="scss" scoped>
.container {
  width: 325px;
  height: 490px;
  background: url("../assets/image/map.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px;
}

.cotent {
  height: 435px;
  width: 300px;
  position: relative;
}

.map {
  width: 300px;
  height: 435px;
}

.map-tips {
  position: relative;
  bottom: 30px;
  left: 0;
  height: 32px;
  background: rgba(0, 86, 188, 0.7);
  display: flex;
  align-items: center;
  span {
    height: 32px;
    display: flex;
    align-items: center;
    margin: 0 6px;
    img {
      margin: 0 4px;
    }
  }
}
</style>
